<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
/* 表单验证 */
interface RuleForm {
  email: string;
  emailCode: string;
  phoneNo: string;
  smsCode: string;
  password: string;
}
const rules = reactive<FormRules<RuleForm>>({
  email: [
    { required: true, message: "请输入登录邮箱", trigger: "blur" },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  emailCode: [{ required: true, message: "请输入邮箱验证码", trigger: "blur" }],
  phoneNo: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
  smsCode: [{ required: true, message: "请输入管理员手机号", trigger: "blur" }],
  password: [
    { required: true, message: "请输入手机号验证码", trigger: "blur" },
  ],
});

const ruleForm = reactive<RuleForm>({
  email: "asdfasdf@asdf.casdf",
  emailCode: "234234",
  phoneNo: "234234",
  smsCode: "234234",
  password: "234234",
});
const ruleFormRef = ref<FormInstance>();
const btnLoading = ref(false);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      btnLoading.value = true;
      useApi()
        .user.register(ruleForm)
        .then((res: any) => {
          btnLoading.value = false;
          console.log(res);
          // if (process.env.NODE_ENV === "development") {
          //   return ElMessage({
          //     message: "登陆成功~",
          //     type: "success",
          //   });
          // }
          ElMessage({
            message: "注册成功~",
            type: "success",
            onClose: () => {},
          });
        })
        .catch(() => {
          btnLoading.value = false;
        });
    }
  });
};
</script>

<template>
  <div class="pages">
    <div class="content">
      <h1 class="title">注册商户</h1>
      <div class="register">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          :label-width="110"
          label-position="left"
          inline
          class="ruleForm"
        >
          <h2><span>*</span> 填写主体信息</h2>
          <div class="form-content">
            <div class="line">
              <div class="label">主体类型</div>
              <div class="value">企业</div>
            </div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="上传营业执照" prop="email">
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                  >
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <!-- <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <el-icon><zoom-in /></el-icon>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <el-icon><Download /></el-icon>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <el-icon><Delete /></el-icon>
                          </span> -->
                        </span>
                      </div>
                    </template>
                  </el-upload>
                  <div class="tips">大小不超过 5MB，支持 jpg/png 格式。</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业名称" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业名称"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="统一社会信用代码" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入统一社会信用代码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业注册地址" prop="email">
                  <div class="addr flex flex-wrap">
                    <el-select
                      placeholder="省"
                      style="width: 240px"
                    >
                      <el-option
                        label="item.label"
                        value="item.value"
                      />
                    </el-select>
                    <el-select
                      placeholder="市"
                      style="width: 240px"
                    >
                      <el-option
                        label="item.label"
                        value="item.value"
                      />
                    </el-select>
                    <el-select
                      placeholder="区"
                      style="width: 240px"
                    >
                      <el-option
                        label="item.label"
                        value="item.value"
                      />
                    </el-select>
                  </div>
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业名称"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="证件起止时间" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入证件起止时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业所属类别" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业所属类别"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="法人姓名" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入法人姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="法人身份证号码" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入法人身份证号码"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="上传身份证" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入上传身份证"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="法人证件起止时间" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入法人证件起止时间"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <h2><span>*</span> 填写开户信息</h2>
          <div class="form-content">
            <el-row>
              <el-col :span="12">
                <el-form-item label="企业对公账户开户名" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业对公账户开户名"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业对公账户" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业对公账户"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="企业对公账户开户行" prop="email">
                  <el-select
                    v-model="ruleForm.email"
                    placeholder="请选择开户行"
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="email">
                  <el-select
                    v-model="ruleForm.email"
                    placeholder="请选择开户支行"
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业对公账户" prop="email">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业对公账户"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <h2>填写企业信息</h2>
          <div class="form-content">
            <el-row>
              <el-col :span="12">
                <el-form-item label="企业官网">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业官网地址"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="ml" label="企业客服电话">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业客服电话"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="企业地址">
                  <el-input
                    v-model="ruleForm.email"
                    placeholder="请输入企业实际办公地址"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="btn-group">
            <div class="btns">
              <div class="btn1">提交资料</div>
              <div class="btn2">取消</div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pages {
  padding-top: 40px;
  padding-bottom: 106px;
  box-sizing: border-box;
  background: #fafafa;
  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    .btns {
      display: flex;
      align-items: center;
      margin: 0px auto;
      .btn1 {
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 280px;
        height: 44px;
        background: #e22000;
        border-radius: 4px;
        margin-right: 40px;
      }
      .btn2 {
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        color: #e12010;
        width: 280px;
        height: 44px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e12010;
      }
    }
  }
  .ml {
    margin-left: 20px;
  }
  .register-btn {
    width: 280px;
    height: 44px;
    background: #e22000;
    font-weight: 400;
    font-size: 14px;
    border-color: #e22000;
    margin: 40px auto 20px auto;
    display: block;
    color: #ffffff;
    &:hover {
      opacity: 0.8;
    }
  }
  .title {
    font-weight: 500;
    font-size: 28px;
    color: #000000;
  }
  .register {
    background: #ffffff;
    margin-top: 22px;
    padding-bottom: 60px;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    h2 {
      background: #eff3fa;
      border-radius: 2px 2px 0px 0px;
      font-weight: 400;
      font-size: 14px;
      color: #202949;
      padding: 11px 36px;
      display: block;
      span {
        color: #e12010;
      }
    }
  }
  .form-content {
    padding: 40px;
    box-sizing: border-box;
    .el-row {
      margin-bottom: 20px;
    }
    :deep(.el-form-item__label) {
      font-weight: 400;
      font-size: 14px;
      color: #202949;
    }
    :deep(.el-form-item__content) {
      width: 430px;
      border-color: #c2cbdd;
      .el-input__inner {
        line-height: 40px;
        height: 40px;
        &::-webkit-input-placeholder {
          font-weight: 400;
          font-size: 14px;
          color: #c2cbdd;
        }
      }
    }
    .line {
      display: flex;
      align-items: center;
      margin-bottom: 32px;
      .label {
        font-weight: 400;
        font-size: 14px;
        color: #202949;
      }
      .value {
        margin-left: 12px;
        font-weight: 400;
        font-size: 14px;
        color: #797f92;
      }
    }
  }
}
</style>
